<template>
    <!-- 路由组件以 page-xxx 开头 -->
    <div class="page-demo">
        <!-- 
            在 SFC 中，推荐为子组件使用 PascalCase 的标签名，且没有插槽内容时，应使用 /> 来关闭标签
                · 所有属性及事件推荐 kebab-case 形式
                · 事件回调建议以 on-xxx 结尾
                · 针对 boolean 类型属性可省略要传递的 prop 属性值
         -->
        <Chilren
            :title="title"
            disabled
            @change-title="onTitleChanged"
        />

        <!-- 使用 template 标签将一组根据条件渲染的元素包裹起来，而非在每个标签上做判断 -->
        <template v-if="true">
            <span></span>
            <span></span>
            <span></span>
        </template>

        <!-- 
            使用具有唯一性 key 作为 v-for 的键值，除非你确定要渲染的列表不会动态增减，否则尽可能避免使用 index；
            永远不要将 v-if 和 v-for 同时用在同一个元素上，你完全可以通过计算属性或将渲染条件移至到容器元素上
         -->
        <ul>
            <li
                v-for="user in activeUsers"
                :key="user.id"
            >
                {{ user.name }}
            </li>
        </ul>

        <!-- 使用具有语义化的标签，替换 span 这种 Fake 效果，因为你不能预知它会在某些情况下被 disabled -->
        <button></button>
    </div>
</template>

<script setup>
//引入子组件
import Chilren from './chilren.vue';
//引入vue及相关生态
import { ref, computed, watch, onMounted, onUnmounted } from 'vue';
import { useRouter, useRoute } from 'vue-router';
import { useStore } from 'vuex';
//引入node_modules 模块
//引入hooks函数或辅助工具函数
import { useRequest } from './service.js';

//声明区(props、emits、vDirectives)
//参考 Chilren.vue

//Route & Store ...declaration only ?
const router = useRouter();
const route = useRoute();

const store = useStore();

//useRequest
//const { loading, data, error } = useRequest();

//--------------- module 1 start --------------//
//状态区
const title = ref('子组件');
const hasTitle = computed(() => title ? 'yes' : 'no');
watch(hasTitle, (value) => {
    //do something...
})

//方法区
function onTitleChanged(str) {
    changeTitle(str)
}
function changeTitle(str) {
    title.value = str;
}
//--------------- module 1 end   --------------//

//--------------- module 2 start --------------//
//--------------- module 2 end   --------------//

//--------------- module n start --------------//
//--------------- module n end ----------------//

//生命周期钩子函数
onMounted(() => {})
onUnmounted(() => {})

//将可供外部 ref 调用的状态暴露出去
defineExpose({
    changeTitle
})

</script>

<style lang="scss" scoped>
/*
    1. 图片命名 xxx-default.png / xxx-selected.png
    2. 了解哪些属性值默认继承的，尽量将样式定义在它的祖先元素上，譬如 font
    3. 避免使用 !important
    4. 省略 0 后面的单位
    5. 在数值中总是包括前导 0，如 0.8em
    6. 不要在 url() 中使用引号
    7. 属性缩写，譬如 background
    8. 出于性能原因，避免不必要的祖先选择器（Level4）
    9. 按字母排序（可选）
 */
</style>